<template>
    <div class="newPrimaryClass">
        <div class="newPrimaryClass_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">新增设计案例推荐<i class="el-icon-close"></i></div>
		</div>
        <!-- 商家类型与返回 -->
        <div class="newPrimaryClass_type">
            <div>商家列表/<span class="text">新增设计案例推荐</span></div>
            <el-button @click="toBack" type="success">返回</el-button>
        </div>

        <!-- 内容 -->
        <div class="contentBox">
            <h3>基础信息</h3>
            <div class="item">
                <div class="tit" >案例类型</div>
                <el-select v-model="valueCase" @change="selectType" placeholder="请选择">
                    <el-option
                        v-for="item in caseTypeList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <div class="tit">选择卖场</div>
                <el-select
                  v-model="marketId"
                  clearable
                  @change="selectMarket"
                  filterable
                  placeholder="请选择卖场"
                >
                  <el-option
                    v-for="item in marketList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
            </div>
            <div class="item">
                <div class="tit">排序</div>
                <el-input class="input" type="number" v-model="sort"></el-input>
            </div>
            <div class="item">
                <div class="tit">设计案例</div>
                <el-input class="input" v-model="shopInput" @input="changeInput"></el-input>
                <el-button type="primary" @click="searchShop">搜索</el-button>
            </div>
            <div class="shopBox" v-if="shopList.length" ref="box">
               <div class="shopItem" v-for="(item,index) in shopList" :key="index">
                    <img :src="item.thumb_url[0].path" alt="">
                    <div class="title">{{item.title}}</div>
                    <el-button @click="toSelectShop(item)">选择</el-button>
               </div>
               <p @click="openMore">{{moreTxt}}</p>
            </div>
            <div class="shopBox" style="border:0" v-if="!shopList.length">
               <div style="text-align:center;" v-if="shopStatus">暂无数据~</div>
            </div>
            <div class="selectShopBox" v-if="Object.keys(this.selectShop).length!=0">
                <img :src="selectShop.thumb_url[0].path" alt="">
                <!-- <div class="tit">{{selectShop.product_title}}</div> -->
                <div>品牌：{{selectShop.title}}</div>
                <!-- <div>价格：￥{{selectShop.price}}</div> -->
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="toSubmit">确定</el-button>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      shopInput: "",
      page: 1,
      pagesize: 10,
      store: "",
      sort: "",
      shopList: [],
      selectShop: {}, //已选择商家
      shopStatus: false,
      moreTxt: "点击加载更多",
      caseTypeList:[{
          name:'普通案例',
          value:0
      },{
          name:'3D案例',
          value:1
      }],
      valueCase:'',
      id:null,//推荐id
      marketList:[], //卖场列表
      marketId:'', //已选卖场id
    };
  },
  mounted() {
    // let list_c = this.$refs.list_c;
    // console.log(list_c);
    // list_c.addEventListener("scroll", () => {
    //     if (this.canscroll) {
    //         //是否具有触发条件
    //         let scroll_top = list_c.scrollTop;
    //         let list = this.$refs.list;
    //         let list_height = parseInt(getComputedStyle(list).height);
    //         console.log(scroll_top);
    //         console.log(list);
    //         console.log(list_height);
    //         // let c_height = parseInt(getComputedStyle(list_c).height);
    //         // if (list_height - (scroll_top + c_height) < 200) {
    //         //     this.canscroll = false; //锁定滚动触发条件
    //         //     if (this.activeisload) {
    //         //         this.page++;
    //         //         this.getCollect();
    //         //     } else {
    //         //         console.log("已加载完所有已收藏的商品");
    //         //     }
    //         // }
    //     }
    // });
    this.id = this.$route.query.id
    if(this.id){
      this.getDesignCase()
    }
    this.remoteMethod()
    
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.shopList = []
      this.selectShop = {}
    },
    // 返回
    toBack() {
      this.$router.back(1);
    },

    // 获取设计案例详情
    getDesignCase(){
      this.$http.post('/api/root/DesignCaseRecommend/view',{id:this.id}).then(res=>{
        console.log(res,'设计案例详情');
        if(res.code==1){
          this.valueCase = res.data.type
          this.sort = res.data.sort
          this.marketId = res.data.market_id
          this.selectShop = {
            id:res.data.case_id,
            title:res.data.title,
            thumb_url:res.data.thumb_url
          }
        }
      })
    },

    openMore() {
      this.page++;
      let params = {
        keyword: this.shopInput,
        type:this.valueCase,
        page: this.page,
        pagesize: this.pagesize,
        market_id:this.marketId
      };
      this.$http.post("/api/root/DesignCaseRecommend/caseMatch", params).then(res => {
        console.log(res, "设计案例列表");
        if (res.code == 1) {
          if (!res.data.length) {
            this.moreTxt = "没有更多了~";
            return;
          }
          this.shopList = this.shopList.concat(res.data);
        }
      });
    },
    // 获取设计案例列表
    getShopList() {
      if(this.marketId==''){
        this.$message.warning('请先选择卖场')
        return
      }
      this.shopStatus = false;
      this.page = 1;
      let params = {
        keyword: this.shopInput,
        type:this.valueCase,
        page: this.page,
        pagesize: this.pagesize,
        market_id:this.marketId
      };
      this.$http.post("/api/root/DesignCaseRecommend/caseMatch", params).then(res => {
        console.log(res, "设计案例列表");
        if (res.code == 1) {
          if (!res.data.length) {
            this.shopStatus = true;
          }
          this.shopList = res.data ? res.data : [];
        }
      });
    },

    // 选择案例类型
    selectType(){
      console.log(this.valueCase,'999999');
    },

    // 搜索确定按钮
    searchShop() {
      if (this.shopInput == "") {
        this.$message.warning("请输入设计案例信息");
        return;
      }
      this.getShopList();
    },

    // 选择按钮
    toSelectShop(item) {
      this.selectShop = item;
      this.shopList = [];
    },

    // input为空
    changeInput() {
      this.shopStatus = false;
      if (this.shopInput == "") {
        this.shopList = [];
      }
    },

    // 确定按钮
    toSubmit() {
      console.log(this.valueCase,'当前的value');
      if(this.valueCase===''){
        this.$message.warning('请选择案例类型')
        return
      }
      if(this.marketId==''){
        this.$message.warning("请选择卖场");
        return;
      }
      if (this.sort == "") {
        this.$message.warning("请输入排序值");
        return;
      }
      if (Object.keys(this.selectShop).length == 0) {
        this.$message.warning("请选择设计案例");
        return;
      }
      let params = {
        id:this.id,
        case_id: this.selectShop.id,
        sort: this.sort,
        type:this.valueCase,
        market_id:this.marketId
      };

      let url = this.id?'/api/root/DesignCaseRecommend/edit':'/api/root/DesignCaseRecommend/add';
      this.$http.post(url, params).then(res => {
        console.log(res, "添加结果");
        if (res.code == 1) {
          this.$message.success(this.id?'修改成功':"添加成功");
          if(!this.id){
            this.selectShop = {};
            this.$router.back(1);
          }else{
            this.getDesignCase();
          }
        } else {
          this.$message.warning(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="less">
@import "add.less";
</style>


